import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
// import HomeScreen from './src/components/HomeScreen';
import ConfigScreen from './src/components/ConfigScreen';
import HomeScreen from './src/components/HomeScreen';
import {Ionicons} from '@expo/vector-icons';
import {Provider} from 'react-redux';
import store from './src/store';
const Tab = createBottomTabNavigator();
const APP: React.FC = () => {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Tab.Navigator
          initialRouteName="Home"
          screenOptions={({route}) => ({
            tabBarIcon: ({focused, color, size}) => {
              let iconName:
                | 'ios-home'
                | 'ios-home-outline'
                | 'md-settings'
                | 'md-settings-outline' = 'ios-home';

              if (route.name === 'Home') {
                iconName = focused ? 'ios-home' : 'ios-home-outline';
              } else if (route.name === 'Settings') {
                iconName = focused ? 'md-settings' : 'md-settings-outline';
              }
              return <Ionicons name={iconName} size={size} color={color} />;
            },
            tabBarActiveTintColor: 'tomato',
            tabBarInactiveTintColor: 'gray',
            headerStyle: {
              backgroundColor: 'white', //导航栏背景颜色
            },
            headerTintColor: 'black', //导航栏字体颜色
            headerTitleStyle: {
              fontWeight: 'bold',
              fontSize: 20,
            },
          })}>
          <Tab.Screen name="Home">
            {(props: any) => <HomeScreen {...props} />}
          </Tab.Screen>
          <Tab.Screen name="Settings" component={ConfigScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    </Provider>
  );
};

export default APP;
